<template>
  <div class="all">
    <!-- {{alldata.w+'-'+alldata.h}} -->
    <div class="top">
      <div class="left">
        <div class="num">3504</div>
        <div class="tit">模块订单数</div>
      </div>
      <div class="middle">
        <div class="num">2256</div>
        <div class="tit">外壳订单数</div>
      </div>
      <div class="right">
        <div class="num">3574</div>
        <div class="tit">成品订单数</div>
      </div>
    </div>
    <div class="bottom">
      <div class="left">
          <div id="DataStatistic" style="width: 135px;height:135px;"></div>
      </div>
      <div class="middle">
          <div id="DataStatistic2" style="width: 135px;height:135px;"></div>
      </div>
      <div class="right">
           <div id="DataStatistic3" style="width: 135px;height:135px;"></div>
      </div>
    </div>
  </div>
</template>

<script>
import echarts from "echarts";
export default {
  props: ["alldata"],
  data() {
    return {};
  },
  mounted() {
    console.log(this.alldata);
    // 基于准备好的dom，初始化echarts实例
    var DataStatistic = echarts.init(document.getElementById("DataStatistic"));
    var DataStatistic2 = echarts.init(document.getElementById("DataStatistic2"));
    var DataStatistic3 = echarts.init(document.getElementById("DataStatistic3"));
    // 指定图表的配置项和数据
    var option = {
       tooltip: {
        formatter: "{a} <br/>{b} : {c}%"
      },
      series: [
        {
          name: "常规任务",
          type: "gauge",
          radius: "90%",
          center: ["50%", "50%"],
          detail: { formatter: "{value}%" },
          data: [{ value: 100, name: "",fontSize:12,}],
          axisLine: {
            lineStyle: {
              //仪表盘轴线相关配置。
              width: 5
              // color:[[1,'#8c929d']]
            }
          },
          splitLine: {
            //分隔线样式相关
            length: 6, //分割线的长度
            lineStyle: {
              width: 2
            }
          }
        }
      ]
    };
    DataStatistic.setOption(option, true);
    DataStatistic2.setOption(option, true);
    DataStatistic3.setOption(option, true);
    // setInterval(function() {
    //   option.series[0].data[0].value = (Math.random() * 100).toFixed(2) - 0;

    // }, 2000);
  }
};
</script>
<style lang="scss" scoped>
.all {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  padding: 5px;
  background: #fff;
  .top {
    flex: 1;
    // border: 1px solid firebrick;
    display: flex;
    .left {
      flex: 1;
      // border: 1px salmon solid;
      display: flex;
      flex-direction: column;
      .num {
        flex: 1;
        font-size: 21px;
        font-weight: 700px;
        color: #0B99C2;
        display: flex;
        justify-content: center;
        align-items: center;
      }
      .tit {
        flex: 1;
        display: flex;
        justify-content: center;
        align-items: center;
        font-size: 14px;
      }
    }
    .middle {
      flex: 1;
      display: flex;
      flex-direction: column;
      border-left: 1px #ccc solid;
      border-right: 1px #ccc solid;
      .num {
        flex: 1;
        font-size: 21px;
        font-weight: 700px;
        color: #048ADD;
        display: flex;
        justify-content: center;
        align-items: center;
      }
      .tit {
        flex: 1;
        font-size: 14px;
        display: flex;
        justify-content: center;
        align-items: center;
      }
    }
    .right {
      flex: 1;
      display: flex;
      flex-direction: column;
      // border: 1px yellowgreen solid;
      .num {
        flex: 1;
        font-size: 21px;
        font-weight: 700px;
        color: #63869C;
        display: flex;
        justify-content: center;
        align-items: center;
      }
      .tit {
        flex: 1;
        font-size: 14px;
        display: flex;
        justify-content: center;
        align-items: center;
      }
    }
  }
  .bottom {
    flex: 1;
    display: flex;
    .left {
      flex: 1;
      //border: 1px solid rebeccapurple;
      display: flex;
      justify-content: center;
      align-items: center;
    }
    .middle {
      flex: 1;
      // border: 1px solid tan;
      display: flex;
      justify-content: center;
      align-items: center;
    }
    .right {
      flex: 1;
      // border: 1px solid violet;
      display: flex;
      justify-content: center;
      align-items: center;
    }
  }
}
</style>